<template>
    <div class="ChangeTable">
        <Row>
            <Button  type="primary" size="small"
                    @click="createCase()">新增申请
            </Button>
            <Col span="24">
                <Table
                    width="100%"
                    :columns="contractTableHead"
                    :data="contractTable.records"
                    :loading="loading"
                    border
                >
                    <template slot-scope="{ row, index }" slot="action">
                        <!--
                             处理  isViewBtn ~~审核中 待补件 待补件审核~~
                             编辑 草稿
                             删除 草稿
                         -->
                        <Button :disabled="!row.isViewBtn" type="primary" size="small" @click="showContractDetial(row)">处理
                        </Button>
                        <Button
                              type="primary" size="small" @click="show(row)">查看
                        </Button>
                    </template>
                    <template slot-scope="{ row, index }" slot="sendMessage">
                         <Button type="primary"  icon="ios-send" size="small" @click="sendMessage(row)">
                        </Button>
                    </template>

                    <!-- 付款方式 -->
                    <template slot-scope="{ row, index }" slot="sourceType">
                        <span>{{getTitle('receiptSourceType',row.sourceType)}}</span>
                    </template>
                    <!-- 处理方式-->
                    <template slot-scope="{ row, index }" slot="treatmentMethod">
                        <span>{{getTitle('treatmentMethod',row.treatmentMethod)}}</span>
                    </template>
                    <!-- 收款银行 -->
                    <template slot-scope="{ row, index }" slot="bankCode">
                        <span>{{getTitle('bankCode',row.bankCode)}}</span>
                    </template>
                    <!-- 状态 -->
                    <template slot-scope="{ row, index }" slot="processStatus">
                        <span>{{getTitle('processStatus',row.processStatus)}}</span>
                    </template>
                </Table>
            </Col>
            <Col span="24">
                <Row type="flex" justify="end" class="table-page">
                    <Page
                        :current="contractTable.current"
                        :transfer="true"
                        :total="contractTable.total"
                        :page-size="contractTable.size"
                        @on-change="changePage"
                        @on-page-size-change="changePageSize"
                        :page-size-opts="pageSizeOpts"
                        size="small"
                        show-total
                        show-elevator
                        show-sizer
                    ></Page>
                </Row>
            </Col>
        </Row>
        <div v-if="modal">
        <Modal
            :title="modalTitle"
            v-model="modal"
            :mask-closable="false"
            :width="500"
            :styles="{top: '90px'}"
        >
            <sendMessages ref="sendMessages" :Obj="Obj" :whetherCustom="whetherCustom"  @childSendMsg="childSendMsg" />
            <div slot="footer">
                <i-switch  @on-change="change" size="large" >
                    <span slot="open">自定义</span>
                    <span slot="close">模板</span>
                </i-switch>
                <Button type="primary"  @click="sendMsg('revokeHandle')">发送</Button>
                <Button type="primary" @click="closeModal">关闭</Button>
            </div>
        </Modal>
        </div>
    </div>

</template>
<script>
    import {getTitleFromDataDict} from "_p/basic/assets/contract/js/utils";
    import sendMessages from "../modal/sendMessages";
    //短信发送
    import {
        sendMessageInfo
    } from "@/projects/basic/api/contract/message-template-config/messageTemplate";

    export default {
        components: {
            sendMessages
        },
        props: {
            formValidate: {
                type: Object,
                required: true
            },
            dataDict: {
                type: Object,
                required: true
            },
            contractTable: {
                type: Object,
                required: true
            },
            loading: {
                type: Boolean,
                required: true,
                default: true
            }
        },
        data() {
            return {
                modalTitle: "",
                modal: false,
                whetherCustom: "no",
                spinShow:false,
                Obj:{},
                pageSizeOpts: [10, 20, 50, 100],
                contractTableHead: [
                    {
                        title: "操作",
                        slot: "action",
                        width: 180,
                        align: "center"
                    },
                    {
                        key: 'caseNo',
                        title: '案件编号',
                        minWidth: 120,
                        align: 'center'
                    }, {
                        key: 'applyNo',
                        title: '申请编号',
                        minWidth: 120,
                        align: 'center'
                    },
                    {
                        key: 'custName',
                        title: '客户姓名',
                        minWidth: 120,
                        align: 'center'
                    },
                    {
                        key: 'contractNo',
                        title: '合同号',
                        minWidth: 120,
                        align: 'center'
                    },
                    {
                        title: "付款方式",
                        key: "sourceType",
                        minWidth: 120,
                        slot: "sourceType",
                    },
                    {
                        key: 'treatmentMethod',
                        title: '处理方式',
                        slot: 'treatmentMethod',
                        minWidth: 120,
                        align: 'center'
                    },
                    {
                        title: "收款日期",
                        key: "succeedTime",
                        minWidth: 120,
                        align: 'center'
                    },
                    {
                        title: "收款金额",
                        key: "arriveAmt",
                        minWidth: 120,
                        align: 'center'
                    },
                    {
                        key: 'startTime',
                        title: '申请时间',
                        minWidth: 120,
                        align: 'center',
                    }
                    , {
                        key: 'endTime',
                        title: '结束时间',
                        minWidth: 120,
                        align: 'center'
                    }, {
                        key: 'handleStatus',
                        title: '处理状态',
                        slot: 'processStatus',
                        minWidth: 120,
                        align: 'center'
                    },{
                        key: 'phone',
                        title: '联系方式',
                        minWidth: 120,
                        align: 'center'
                    },{
                        key: 'sendMessage',
                        title: '短信',
                        slot: 'sendMessage',
                        minWidth: 80,
                        align: 'center'
                    }
                ],
            };
        },
        mounted() {
        },
        methods: {
            init() {
            },
            // 分页 Fn
            changePageSize(num) {
                this.$emit(
                    "getList",
                    Object.assign({}, this.formValidate, {pageSize: num})
                );
                this.formValidate.pageSize = num;
            },
            changePage(num) {
                this.$emit(
                    "getList",
                    Object.assign({}, this.formValidate, {pageNumber: num})
                );
                this.formValidate.pageNumber = num;
            },
            showContractDetial(row ) {
                this.$emit("showContractDetial", row,"write");
            },
            show(row) {
                this.$emit("showContractDetial", row,"read");
            },
            getTitle(type, val) {
                let data = this.dataDict[type + "Dict"] || [];
                return getTitleFromDataDict(data, val);
            },
            createCase() {
                this.$emit("createCase");
            },
            sendMessage(row){
                this.modal = true;
                this.modalTitle = "发送短信";
                this.whetherCustom="no";
                this.Obj = {
                    phone: row.phone,
                    contractNo: row.contractNo,
                    custName: row.custName
                }
            },
            closeModal() {
                this.modal = false;
                this.modalTitle = null;
            },
            //发送短信
            sendMsg(template) {
                this.$Modal.confirm({
                    title: "确认发送？",
                    onOk: () => {
                        if (this.$refs.sendMessages) {
                            this.showSpin();
                            let data ={templateBusiness:template};
                            this.$refs.sendMessages.formValidate("childSendMsg",data);
                        }
                    }
                });

            },
            change(status) {
                if(status){
                    this.whetherCustom = "yes";
                }else{
                    this.whetherCustom = "no";
                }

            },
            showSpin() {
                this.spinShow = true;
            },
            closeSpin() {
                this.spinShow = false;
            },
        childSendMsg(d) {
            sendMessageInfo(d).then(res => {
                if (res.code === "0000") {
                    this.$Message.success("操作成功");
                }
                if (res.code === "0001") {
                    this.$Message.success(res.msg);
                }
            });
        }
    }}
</script>
<style scoped>
</style>
